<template>
  <div class="barcode-generator-page">
    <div class="generator-container">
      <h1>条形码生成器</h1>
      
      <div class="preview-area">
        <img ref="barcodeImage" alt="条形码预览" />
        <div class="scan-tip">
          <el-link type="primary" @click="openScan">
            <el-icon><Camera /></el-icon>
            点击调用微信扫一扫功能
          </el-link>
        </div>
      </div>

      <div class="settings-area">
        <h3>条形码配置</h3>
        <el-form :model="barcodeConfig" label-position="top">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="条形码内容">
                <el-input v-model="barcodeConfig.text" placeholder="请输入条码内容" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="条形码类型">
                <el-select v-model="barcodeConfig.format" @change="handleFormatChange">
                  <el-option v-for="type in barcodeTypes" 
                            :key="type.value" 
                            :label="type.label" 
                            :value="type.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="条码宽度">
                <el-input-number v-model="barcodeConfig.width" :min="1" :max="4" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="条码高度">
                <el-input-number v-model="barcodeConfig.height" :min="10" :max="150" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="外边距">
                <el-input-number v-model="barcodeConfig.margin" :min="0" :max="25" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="背景颜色">
                <el-color-picker v-model="barcodeConfig.background" show-alpha />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="条码颜色">
                <el-color-picker v-model="barcodeConfig.lineColor" show-alpha />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="显示文字">
                <el-switch v-model="barcodeConfig.displayValue" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="文字对齐">
                <el-select v-model="barcodeConfig.textAlign">
                  <el-option label="左对齐" value="left" />
                  <el-option label="居中" value="center" />
                  <el-option label="右对齐" value="right" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="字体">
                <el-select v-model="barcodeConfig.font">
                  <el-option label="Monospace" value="monospace" />
                  <el-option label="Sans-serif" value="sans-serif" />
                  <el-option label="Serif" value="serif" />
                  <el-option label="Fantasy" value="fantasy" />
                  <el-option label="Cursive" value="cursive" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="字体大小">
                <el-input-number v-model="barcodeConfig.fontSize" :min="8" :max="36" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="字体样式">
                <el-select v-model="barcodeConfig.fontOptions">
                  <el-option label="正常" value="" />
                  <el-option label="加粗" value="bold" />
                  <el-option label="斜体" value="italic" />
                  <el-option label="加粗斜体" value="bold italic" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="button-group">
          <div class="button-wrapper">
            <el-button type="primary" @click="generateBarcode">
              <el-icon><Refresh /></el-icon>
              生成条形码
            </el-button>
            <el-button type="success" @click="downloadBarcode">
              <el-icon><Download /></el-icon>
              下载条形码
            </el-button>
            <el-button type="warning" @click="returnToHome">
              <el-icon><Back /></el-icon>
              返回首页
            </el-button>
          </div>
        </div>
      </div>

      <div class="notes">
        <h3>帮助说明：</h3>
        <ul>
          <li>支持多种条形码格式：CODE128、EAN13、CODE39等</li>
          <li>可自定义条形码的宽度、高度、颜色等属性</li>
          <li>支持文字显示的位置和样式调整</li>
          <li>可以直接下载生成的条形码图片</li>
          <li>支持微信扫一扫功能</li>
          <li>所有操作在本地完成，不会上传服务器</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Camera, Refresh, Download, Back } from '@element-plus/icons-vue'
import JsBarcode from 'jsbarcode'

const router = useRouter()
const barcodeImage = ref(null)

const barcodeTypes = [
  { label: 'CODE128', value: 'CODE128' },
  { label: 'CODE128 A', value: 'CODE128A' },
  { label: 'CODE128 B', value: 'CODE128B' },
  { label: 'CODE128 C', value: 'CODE128C' },
  { label: 'CODABAR', value: 'CODABAR' },
  { label: 'EAN13', value: 'EAN13' },
  { label: 'EAN8', value: 'EAN8' },
  { label: 'UPC', value: 'UPC' },
  { label: 'CODE39', value: 'CODE39' },
  { label: 'ITF14', value: 'ITF14' },
  { label: 'ITF', value: 'ITF' },
  { label: 'MSI', value: 'MSI' },
  { label: 'Pharmacode', value: 'pharmacode' }
]

const barcodeConfig = ref({
  text: '123456789012',
  format: 'CODE128',
  width: 2,
  height: 100,
  margin: 10,
  background: '#FFFFFF',
  lineColor: '#000000',
  displayValue: true,
  textAlign: 'center',
  textPosition: 'bottom',
  font: 'monospace',
  fontSize: 20,
  fontOptions: '',
  textMargin: 2
})

const handleFormatChange = (format) => {
  switch (format) {
    case 'CODABAR':
      ElMessage.info('条形码参考：6941049760178')
      break
    case 'CODE128':
      ElMessage.info('条形码参考：xiyueta.com')
      break
    case 'EAN13':
      ElMessage.info('条形码参考：012345678912')
      break
    // ... 其他格式的提示
  }
}

const generateBarcode = () => {
  try {
    JsBarcode(barcodeImage.value, barcodeConfig.value.text, {
      ...barcodeConfig.value,
      valid: (valid) => {
        if (!valid) {
          ElMessage.error('条形码格式无效，请检查输入')
        }
      }
    })
    ElMessage.success('条形码生成成功')
  } catch (error) {
    ElMessage.error('生成失败：' + error.message)
  }
}

const downloadBarcode = () => {
  const link = document.createElement('a')
  link.download = '条形码.png'
  link.href = barcodeImage.value.src
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  ElMessage.success('下载开始')
}

const openScan = () => {
  // 实现微信扫一扫功能
  ElMessage.info('调用微信扫一扫功能')
}

const returnToHome = () => {
  router.push('/')
}

onMounted(() => {
  generateBarcode()
})
</script>

<style lang="scss" scoped>
.barcode-generator-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;

  .generator-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .preview-area {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px;
      background-color: #f8fafc;
      border-radius: 12px;

      img {
        max-width: 100%;
        height: auto;
      }

      .scan-tip {
        margin-top: 15px;
        font-size: 16px;

        .el-icon {
          margin-right: 5px;
        }
      }
    }

    .settings-area {
      h3 {
        color: #4a5568;
        margin: 20px 0;
        font-size: 18px;
      }

      .button-group {
        margin: 20px 0;

        .button-wrapper {
          display: flex;
          gap: 15px;
          justify-content: center;

          .el-button {
            min-width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 8px;
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            .el-icon {
              font-size: 16px;
            }
          }
        }
      }
    }

    .notes {
      margin-top: 40px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
      }

      ul {
        margin: 0;
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
          color: #606266;
          line-height: 1.6;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .barcode-generator-page {
    padding: 10px;

    .generator-container {
      padding: 20px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .button-group {
        .button-wrapper {
          flex-direction: column;
          padding: 0 20px;

          .el-button {
            width: 100%;
            margin: 0;
            justify-content: center;
          }
        }
      }
    }
  }
}

.el-form {
  .el-form-item {
    margin-bottom: 20px;
  }

  .el-color-picker {
    width: 100%;
  }

  .el-switch {
    margin-top: 8px;  // 调整开关的垂直位置以对齐其他元素
  }

  .el-select {
    width: 100%;
  }

  .el-input-number {
    width: 100%;
  }
}
</style> 